<template>
  <div class="tableBox">
    <el-form ref="searchForm" :model="searchForm" size="small" :inline="true">
      <el-row :gutter="40">
        <el-col
          v-for="formItem in formItem"
          :key="formItem.dataIndex"
          :xs="8"
          :sm="8"
          :md="8"
          :lg="6"
          :xl="4"
        >
          <el-form-item
            :label="formItem.title"
            :prop="formItem.dataIndex"
            v-if="!formItem.hideInForm"
          >
            <el-select
              v-if="formItem.valueType == 'select'"
              v-model="searchForm[formItem.dataIndex]"
              :placeholder="formItem.placeholder"
            >
              <el-option
                v-for="optionItem in formItem.options"
                :key="optionItem.value"
                :label="optionItem.label"
                :value="optionItem.value"
              />
            </el-select>
            <el-input
              v-else
              maxlength="200"
              clearable
              v-model="searchForm[formItem.dataIndex]"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="16" :sm="16" :md="16" :lg="12" :xl="8">
          <el-col :span="11" style="padding-right: 0px;padding-left: 0px;">
            <el-form-item label="注册时间">
              <el-date-picker
                v-model="searchForm.beginTime"
                align="right"
                type="date"
                placeholder="选择开始日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker> </el-form-item
          ></el-col>
          <el-col :span="1"><el-form-item>-</el-form-item></el-col>
          <el-col :span="10" style="padding-left: 0px">
            <el-form-item style="display: inline-block">
              <el-date-picker
                v-model="searchForm.endTime"
                align="right"
                type="date"
                placeholder="选择结束日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker> </el-form-item
          ></el-col>
        </el-col>
        <el-col :xs="8" :sm="8" :md="12" :lg="12" :xl="12">
          <el-button size="small" icon="el-icon-refresh" @click="resetList"
            >重置</el-button
          >
          <el-button
            size="small"
            icon="el-icon-search"
            type="primary"
            @click="getDateSource"
            >查询</el-button
          >
          <el-button
            size="small"
            icon="el-icon-search"
            type="primary"
            @click="exportData"
            >导出</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-table
        :data="tableData"
        size="mini"
        :default-sort="{ prop: 'date', order: 'descending' }"
        v-loading="listLoading"
        border
      >
        <el-table-column
          label="编号"
          width="100"
          align="center"
          type="index"
        ></el-table-column>
        <el-table-column
          v-for="formItem in formItem"
          :key="formItem.dataIndex"
          align="center"
          :label="formItem.title"
          :prop="formItem.dataIndex"
        /> 
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="viewDetail(scope.row)" size="small"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pageRight"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :current-page="searchForm.pageNum"
        :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <dialogDiy ref="dialogDiy" title="详情" style="" @handleClose="closeDialog">
      <div
        style="
          max-height: 70vh;
          overflow-y: auto;
          height: 800px;
          padding: 0 20px;
        "
      >
        <el-tabs v-model="activeName">
          <el-tab-pane v-if="!isQuestion" label="基本信息" name="first">
            <transition name="el-fade-in">
              <basic-info
                v-if="activeName == 'first'"
                :detailInfo="detailInfo"
              ></basic-info>
            </transition>
          </el-tab-pane>
          <el-tab-pane
            v-if="type == 1 && !isQuestion"
            label="纳税信息"
            name="second"
          >
            <transition name="el-fade-in">
              <tax-information
                v-if="activeName == 'second'"
                :detailInfo="detailInfo"
              ></tax-information>
            </transition>
          </el-tab-pane>
          <el-tab-pane
            v-if="type == 1 && !isQuestion"
            label="开票信息"
            name="third"
          >
            <transition name="el-fade-in">
              <invoice-information
                v-if="activeName == 'third'"
                :detailInfo="detailInfo"
              ></invoice-information>
            </transition>
          </el-tab-pane>
          <el-tab-pane label="工商司法信息" name="four">
            <transition name="el-fade-in">
              <business-judicial-information
                v-if="activeName == 'four'"
                :detailInfo="detailInfo"
              ></business-judicial-information>
            </transition>
          </el-tab-pane>
        </el-tabs>
      </div>
    </dialogDiy>
    <el-dialog title="匹配主体" :visible.sync="dialogVisible" width="70%">
      <div class="mainContet">
        <el-table
          :data="enterpriseRecord"
          size="mini"
          :default-sort="{ prop: 'date', order: 'descending' }"
          border
        >
          <el-table-column label="序号" align="center" type="index" />
          <el-table-column
            label="公司名称"
            align="center"
            prop="taxpayerName"
          />
          <el-table-column label="税号" align="center" prop="creditCode" />
          <el-table-column label="法人" align="center" prop="legalPerson" />
          <el-table-column label="联系方式" align="center" prop="phone" />
          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="viewEnterpriseDetail(scope.row)"
                size="small"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pageRight"
          background
          @size-change="handleEnterpriseSizeChange"
          @current-change="handleEnterpriseCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :current-page="enterpriseRecordParams.pageNum"
          :page-size="enterpriseRecordParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="enterpriseRecordTotal"
        >
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import dialogDiy from "@/components/dialogDiy/index.vue";
import creditInformation from "./components/creditInformation.vue";
import businessJudicialInformation from "./components/businessJudicialInformation.vue";
import taxInformation from "./components/taxInformation.vue";
import invoiceInformation from "./components/invoiceInformation.vue";
import { getProvinceList } from "@/api/tax";
import { getMemberList, getMemberEnterprise } from "@/api/customer";
import basicInfo from "./components/basicInfo.vue";
import { saveAs } from "file-saver";
import axios from "axios";
import { timeFun } from "../../../utils/date";
import { getToken } from "@/utils/auth";
import { getNowTime } from "@/utils/date";
const baseURL = process.env.BASE_API;

export default {
  components: {
    dialogDiy,
    creditInformation,
    businessJudicialInformation,
    taxInformation,
    basicInfo,
    invoiceInformation,
  },
  data() {
    return {
      dialogVisible: false,
      sourceTypeEnum: {
        ["1"]: "微信公众号",
        ["2"]: "微信小程序",
        ["6"]: "安卓",
        ["7"]: "IOS",
        ["9"]: "抖音小程序",
      },
      searchForm: {
        origin: "",
        platform: "",
        type: "",
        nickName: "",
        province: "",
        phone: "",
        jl: "",
        registerTime: "",
        companyName: "",
        pageNum: 1,
        pageSize: 10,
      },
      radio4: "",
      type: 1,
      total: 0,
      isQuestion: false,
      formItem: [ 
        {
          title: "平台",
          dataIndex: "app",
          valueType: "select",
          options: [
            {
              label: "顺顺助融",
              value: "SmoothCFF",
            },
            {
              label: "助融报告",
              value: "ReportCFF",
            },
          ],
        },
        { title: "来源渠道",
        dataIndex: "channelName",},
        {
          title: "用户类型",
          valueType: "select",
          dataIndex: "type",
          options: [
            {
              label: "访客",
              value: 0,
            },
            {
              label: "用户",
              value: 1,
            },
          ],
        },
        {
          title: "会员昵称",
          dataIndex: "nickname",
        },
        {
          title: "手机号码",
          dataIndex: "phone",
        },
        {
          title: "所属省份",
          dataIndex: "location",
          valueType: "select",
        },

        {
          title: "注册时间",
          valueType: "dateTimeRange",
          dataIndex: "createTime",
          hideInForm: true,
        },
        {
          title: "最近访问时间",
          dataIndex: "date",
          hideInForm: true,
        },
      ],
      tableData: [],
      detailInfo: "",
      activeName: "first",
      listLoading: false,

      enterpriseRecordParams: {
        pageNum: 1,
        pageSize: 10,
      },
      enterpriseRecord: [],
      enterpriseRecordTotal: 0,
    };
  },
  created() {
    this.getProvinceData();
    this.getDateSource();
  },
  methods: {
    exportData() {
      let str = "用户行为分析" + "-" + getNowTime() + ".xlsx";
      const Burl = baseURL + "/statistics/member/export";
      axios({
        method: "get",
        url: Burl,
        params: this.searchForm,
        responseType: "blob",
        headers: { Authorization: getToken() },
      }).then((res) => {
        const blob = new Blob([res.data]);
        saveAs(blob, str);
      });
    },
    async viewDetail(data) {
      this.enterpriseRecordParams.memberId = data.memberId;
      this.getEnterpriseRecord();
    },

    async getEnterpriseRecord() {
      let res = await getMemberEnterprise(this.enterpriseRecordParams);
      this.enterpriseRecord = res.data.list;
      this.enterpriseRecordTotal = res.data.total;
      this.dialogVisible = true;
    },
    async viewEnterpriseDetail(data) {
      this.detailInfo = data;
      console.log(this.detailInfo);

      this.$nextTick(() => {
        if (this.isQuestion) {
          this.activeName = "four";
        }
        this.$refs.dialogDiy.openlog();
      });
    },
    closeDialog() {
      // this.detailInfo = {};
    },
    resetList() {
      this.searchForm = {
        pageNum: 1,
        pageSize: 10,
      };
      this.getDateSource();
    },
    async getProvinceData() {
      const res = await getProvinceList();
      res.data.forEach((element) => {
        element.label = element.name;
        element.value = element.name;
      });
      this.formItem = this.formItem.map((item) => {
        if (item.dataIndex == "location") {
          item.options = res.data;
        }
        return item;
      });
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getDateSource();
    },
    handleEnterpriseSizeChange(val) {
      this.enterpriseRecordParams.pageSize = val;
      this.getEnterpriseRecord();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getDateSource();
    },
    handleEnterpriseCurrentChange(val) {
      this.enterpriseRecordParams.pageNum = val;
      this.getEnterpriseRecord();
    },
    async getDateSource() {
      let parmas = this.searchForm;
      if (
        (this.searchForm.beginTime && !this.searchForm.endTime) ||
        (!this.searchForm.beginTime && this.searchForm.endTime)
      ) {
        return this.$message.warning("请填写开始日期或者结束日期哦");
      }
      if (this.searchForm.beginTime && this.searchForm.endTime) {
        if (!timeFun(this.searchForm.beginTime, this.searchForm.endTime)) {
          return this.$message.warning("结束时间必须大于开始时间");
        }
      }
      let res = await getMemberList(parmas);
      this.tableData = res.data.list.map((item) => {
        item.type = item.type == 1 ? "用户" : "访客";
        item.app = item.app == "SmoothCFF" ? "顺顺助融" : "助融报告";
        item.sourceType = this.sourceTypeEnum[item.sourceType];
        return item;
      });
      this.total = res.data.total;
    },
  },
};
</script>

<style lang="scss" scoped>
.tableBox {
  margin-top: 10px;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;

  /deep/ .el-form-item {
    width: 100%;
    .el-form-item__label {
      width: 30%;
    }
    .el-form-item__content {
      width: 70%;
    }
    .el-select,
    .el-date-editor {
      width: 100%;
    }
  }
  .mainContet {
    padding: 0px 10px;
    /deep/ .el-radio-group {
      display: block;
    }
    /deep/ .el-radio {
      display: block;
      margin-bottom: 10px;
      margin-left: 0px;
      margin-right: 0px;
    }
  }
}
</style>
